<template>
    <div>
        <h2>排房显示列表</h2>
        <input type="button" @click="GetNumberDelAll" value="批量删除" class="btn btn-info" />
        <input type="button" @click="GetNumberPutAll(1)" value="批量上架" class="btn btn-primary" />
        <input type="button" @click="GetNumberPutAll(0)" value="批量下架" class="btn btn-info" />
        <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td><input type="checkbox" v-model="checkAll" @click="gocheckAll"/></td>
                       
                        <td>已排</td>
                        <td>未排</td>
                        <td>房型</td>
                        <td>房号</td>
                        <td>状态</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="item in data3.list" :key="item.id">
                        <td><input type="checkbox" :value="item.id"  v-model="ids" @change="gocheckAllone"/></td>
                        <td>{{ item.yiPai}}</td>
                        <td>{{ item.weiPai}}</td>
                        <td>{{ item.roomTypeName}}</td>
                        <td>{{ item.numberName}}</td>
                        <td>{{ item.state==1?"上架":"下架"}}</td>
                        <td>
                            <input type="button" @click="GetPainfo(item.id)" value="详情" class="btn btn-info" />
                           
                        </td>
                    </tr>
                </tbody>
            </table>
    </div>
    <div>
        <span>共<a style="color: red;">{{data3.totalCount}}</a>条数据</span>
        <span>共<a style="color: red;">{{data3.totalPage}}</a>页</span>
        <span>当前<a style="color: red;">{{queryInfo3.Pageindex}}</a>/<a style="color: red;">{{queryInfo3.PageSize}}</a>页</span>
       <input type="button" value="首页" @click="gopage('a')"/>
       <input type="button" value="上一页" @click="gopage('b')"/>
       <span v-for="item in data3.totalPage" :key="item" @click="gopage(item)" >{{ item }}</span>
       <input type="button" value="下一页" @click="gopage('c')"/>
       <input type="button" value="尾页" @click="gopage('d')"/>

    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
let route=useRoute();
let router=useRouter();
//房号展示
onMounted(()=>{
    GetRoomPaifangList()
})

//排房
let queryInfo3=reactive({
    
    Pageindex:1,
    PageSize:2,

  })
  //排房
  let data3:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0
})

//选择
let ids=ref([]);
let checkAll=ref(false);
let gocheckAll=()=>{
    checkAll.value=!checkAll.value;
    if(checkAll.value){
        ids.value=data3.list.map((item:any)=>{
           return item.id;
        })
    }
    else{
        ids.value=[];
    }
}
let gocheckAllone=()=>{
    if(ids.value.length==data3.list.length){
        checkAll.value=true;
    }
    else{
        checkAll.value=false;

    }
}



//获取排房列表
const GetRoomPaifangList=()=>{
    axios({
        url:'/api/PaiRoom/GetPaiRooList',
        method:'get',
        params:queryInfo3 
    })
    .then((res)=>{
        console.log(res);
        data3.list=res.data.list;
        data3.totalCount=res.data.totalCount;
        data3.totalPage=res.data.totalPage;
    })
}
//分页
const gopage=(str:any)=>{
    switch(str){
        case 'a':
            if(queryInfo3.Pageindex==1){
                alert('已经是第一页了');
                return;
            }
            queryInfo3.Pageindex=1;
        break;
        case 'b':
        if(queryInfo3.Pageindex==1){
                alert('没有上一页了');
                return;
            }
            queryInfo3.Pageindex--;   
        break;
        case 'c':
        if(queryInfo3.Pageindex==data3.totalPage){
                alert('没有下一页了');
                return;
            }
            queryInfo3.Pageindex++;   
            break;  
            case 'd':
                if(queryInfo3.Pageindex=data3.totalPage){
                    alert('没有下一页了');
                    return;
                }
                queryInfo3.Pageindex=data3.totalPage;
            break;  
            case str:
            queryInfo3.Pageindex=str;
    }
    GetRoomPaifangList();
}

//批量修改状态
const GetNumberPutAll=(state:any)=>{
    var f=confirm('确认修改吗');
    if(f==true){
        axios({
            url:'/api/PaiRoom/PaiRoomUptAll',
            method:'put',
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            GetRoomPaifangList();
        }
        else{
            alert('修改失败');
        }
        
    })
    }
}
//批量删除
const GetNumberDelAll=()=>{
    var f=confirm('确认删除吗');
    if(f==true){
        axios({
            url:'/api/PaiRoom/PaiRoomDelAll',
            method:'delete',
            params:{
                ids:ids.value.toString(),
                
            }
        })
        .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert('删除成功');
            GetRoomPaifangList();
        }
        else{
            alert('删除失败');
        }
        
    })
    }
}
//跳转到详情页
const GetPainfo=(id:any)=>{
    router.push({
        path:'/PaiRoomXiangqing',
        query:{id:id}
    })
}
</script>

<style scoped>
span{
    margin:0 10px;
}
input[type="button"]{
    margin:0 20px ;
}
</style>